﻿@{
    ViewBag.Title = "RotateSquare";
    Layout = "~/Views/Shared/_EaselPage.cshtml";
}

<h2>Rotate Square</h2>

<canvas id="testCanvas" width="1000" height="750" style="border: #008000 solid 1px"></canvas>

<script type="text/javascript">
    var stage;
    function init() {
        stage = new createjs.Stage(document.getElementById('testCanvas'));
        createjs.Ticker.addEventListener("tick", handleTick);
        createjs.Ticker.setFPS(60);
        start();
    }
    function handleTick(e) {
        stage.update();
    }
    function start() {
        // rotate by upper left
        var g = new createjs.Graphics();
        g.beginStroke('#000').beginFill('#00ca00').drawRect(0, 0, 100, 100);
        var square = new createjs.Shape(g);
        square.x = 150;
        square.y = 150;
        stage.addChild(square);
        createjs.Tween.get(square).to({ rotation: 360 }, 3000);

        // rotate by center(set the anchor point - registration point)
        var g2 = new createjs.Graphics();
        g2.beginStroke('#000').beginFill('#00ca00').drawRect(0, 0, 200, 100);
        var square2 = new createjs.Shape(g2);
        square2.regX = 100;
        square2.regY = 50;
        square2.x = stage.canvas.width / 2;
        square2.y = stage.canvas.height / 2;
        stage.addChild(square2);
        createjs.Tween.get(square2).to({ rotation: 360 }, 5000);
    }

    window.onload = function () {
        init();
    }
</script>